<template>
    <!-- 绑定地址弹窗 -->
    <el-dialog
      center
      v-model="dialogMapVisible"
      :close-on-click-modal="false"
      :title="t(`module.table.BindAddress`)"
    >
    <el-form :model="formData">
      <el-form-item
        :label="t(`module.table.Address`)"
        :label-width="formLabelWidth"
      >
        <el-autocomplete
          v-model="formData.address"
          :fetch-suggestions="searchMap"
          clearable
          class="inline-input w-50"
          :placeholder="t(`module.table.DefaultInput`)"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Map`)"
        :label-width="formLabelWidth"
      >
        <div class="dialog-map" id="device_container" />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Lng`)"
        :label-width="formLabelWidth"
      >
        <el-input v-model="formData.lng" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Lat`)"
        :label-width="formLabelWidth"
      >
        <el-input v-model="formData.lat" disabled autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelBindAddress">{{
          t(`module.table.Cancel`)
        }}</el-button>
        <el-button type="primary" @click="bindAddressFunc">{{
          t(`module.table.Confirm`)
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { useI18n } from "vue-i18n";
import { useGoogleMap } from "@/hooks/useGoogleMap";
import { useAMap } from "@/hooks/useAMap";
import {getCurrentInstance, nextTick, onMounted, reactive, toRefs} from "vue"
import API from "api";
import { ElMessage } from "element-plus";


export default {
  name: 'BindAddressDialog',
  props: ['addressData','dialogMapVisible'],
  setup(props, context) {
    const { t } = useI18n();
    const { proxy } = getCurrentInstance();
    const { initMap, mapSearch, addMarker } = useGoogleMap(
      "device_container",
      proxy
    );
    // const { initMap, mapSearch, addMarker } = useAMap(
    //   "device_container",
    //   proxy
    // );
    let pageData = reactive({
      formData: {
        id: 0,
        action: "bindAddress",
        lng: "",
        lat: "",
        address: "",
        room_no: "",
      }
    })
    pageData.formData = props.addressData

    onMounted(() => {
      initMap(props.addressData.lng, props.addressData.lat, props.addressData.address);
    })

    // 地址搜索
    const searchMap = (val, cb) => {
      mapSearch(val, cb);
    };

    // 设置标点
    const handleSelect = (val) => {
      let address = val.link.address;
      let location = val.link.location;
      if (location != "" && location.length == 2) {
        let lng = location[0];
        let lat = location[1];
        pageData.formData.lng = location[0] + "";
        pageData.formData.lat = location[1] + "";
        let row = {
          lng: lng,
          lat: lat,
          address: address,
        };
        addMarker(row);
      }
    };
    
    // 绑定主机地址信息
    const bindAddressFunc = () => {
      if (pageData.formData.lng == "" || pageData.formData.lat == "") {
        ElMessage.error("请选择正确的地址");
        return;
      }
      API.handleDevice(pageData.formData).then((res) => {
        if (res.code == 0) {
          ElMessage({
            message: "Success",
            type: "success",
            duration: 3000,
          });
          context.emit('bindAddressSuccess')
        } else {
          ElMessage.error(res.data);
        }
      });
    };

    // 关闭弹窗
    const cancelBindAddress = () => {
      context.emit('cancelBindAddress')
    }


    return {
      t,
      searchMap,
      handleSelect,
      bindAddressFunc,
      cancelBindAddress,
      ...toRefs(pageData),
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-map {
  width: 80vh;
  height: 200px;
}
</style>